/**
 * @author lulongwen
 * Date: 2023-08-30 22:38
 * Description: RoundRectangle 圆角矩形
 */

import { number, bool } from 'prop-types';

RoundRectangle.propTypes = {
  width: number,
  height: number,
  readOnly: bool,
};
RoundRectangle.defaultProps = {
  width: 48,
  height: 24,
  readOnly: false,
}

export function RoundRectangle(props) {
  const { width, height, selected, readOnly } = props;

  const rx = Math.ceil(width / height);

  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width={width}
      height={height}
      className={readOnly ? 'overflow-visible' : 'overflow-hidden'}
    >
      <rect
        // 矩形的左侧位置，x
        x='0'
        // 矩形的顶端位置，y
        y='0'
        // rx 舍入的宽度
        rx={rx}
        // ry 确定舍入的高度
        width={width}
        height={height}
        // 填充颜色
        fill='#668de3'
        strokeWidth={selected && readOnly ? 2 : 0}
        stroke='#fff'
      />
    </svg>
  );
}
